Introduction

Previously, you learned about the importance of creating an onboarding flow for mobile apps in order to get new users acquainted with the app and its features as quickly and efficiently as possible. In this exercise, you’ll put those ideas into practice for a page built with SwiftUI.

Scenario

Before users start ordering food through the Little Lemon app, it’s important that they know how to make use of the app and understand what features it has. While you won’t create a full onboarding flow here, you’ll get one started by creating a registration page that prompts the user to enter their name and password.

Instructions

Before you begin, make sure you have the latest version of XCode. Use the project you set up in the previous exercise: Module 1 Lesson 2 item 06 - Setting up a SwiftUI project

The registration page should have the following elements:

TextField – to input the first name of the user
TextField – to input the last name of the user
TextField – to input an email of the user
Button – to perform the registration action

Follow the steps below to implement the registration page.

Step 1: Create a new SwiftUI file for onboarding

Open up the XCode project. Select File > New > File and choose the SwiftUI View file under the iOS tab and User Interface section. Then press Next .
Name the file Onboarding and press Create .
In the project files list, go to the file that has your project name in it and ends with the word "App". For example LittleLemonRestaurantApp.swift.
Replace ContentView() initialization inside the file with your new Onboarding() view initialization to make it a default screen that loads when you run your application.
Remove the ContentView file from the project.

You should now have a file in your project file tree named Onboarding.swift and it should load as a first screen when you run your application.

Tip: Notice that the latest XCode does not display file extensions by default so you will likely only see the file named Onboarding without the extension .swift in the project files tree.

To recap how to create new files and navigate Xcode, you can review the following resources:

Step 2: Add a vertical stack to your onboarding page

Open the newly created Onboarding file. You will see some default view code generated for you that outputs “ Hello, World! ” using a Text element.

Modify it as follows:

Remove all the views inside the body variable code block. At the time of writing the current latest Xcode version generates only a Text element inside it.
In its place, put a VStack element.

Tip: If you are having trouble implementing any of the previous steps, review the following resources:

Step 3: Add three text fields to input user information

Add three text fields inside the VStack to input the first name , last name and email information of the user:

Declare three variables in the Onboarding file above the body variable. Name them firstName , lastName and email . Initialize all three with an empty String and declare them to be a state variables using the @State syntax before their declaration.
Inside the VStack content, add three TextField elements one after another.
All text fields take two parameters in their constructors. Set the first parameters of each text field from top to bottom as "First Name" , "Last Name" and "Email" respectively.
Use the variables firstName , lastNme and email created in the previous steps as the second parameters for each text field respectively.
Run the code. You should now see three interactable text fields on the screen with "First Name" , "Last Name" and "Email" placeholder text inside them

Tip: Remember, when passing the state variable to the TextField , use the $ sign before the name of the variable. If you need any help with the steps above, refer to the following resource:

Create the User Interface with SwiftUI, Text and TextField

Step 4: Add a button to complete the registration

Below the text fields, add an additional Button element and initialize it with "Register" .
Add an empty trailing closure after the button initialization to perform no action so far.
Above the Onboarding struct but before the import statements, add three new global String constants. Name them whatever you like but make sure the values that you initialize them with are unique. They will be used as the keys in UserDefaults to store and access the first name, last name and email of the user. For example, let kFirstName = "first name key" and so on, for the rest.
Inside an empty button trailing closure that you created in a previous step, add an if-else statement to verify that firstName , lastName and email state variables are not empty. Use isEmpty property and check that it is false on all of them.
Inside the if-else block use the standard property of the UserDefaults and the three global keys you defined at the top of the file, to store the firstName , lastName and email state variable values using the set method. For example, UserDefaults.standard.set(firstName, forKey: kFirstName) and so on for the rest of the data.
(Optional) For extra security - add a third check inside the if clause, to verify that email is valid before storing the details and navigating to the Home screen

If you run the project now you should see a button appear below the text fields.

Tip: If you need any help with the steps above, refer to the following resource:

Create the User Interface with SwiftUI, Controls in SwiftUI

To style your views in a more advanced way you can refer to the contents covered in the Create the User Interface with SwiftUI course, as well as view the following documentation:

Conclusion

In this exercise, you found out how to create a registration page that asked the user to enter their name and password. This is useful as the starting page for a more fully-developed onboarding flow.